<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
  <div class="pane">
    <p @click="sort1">Sort to 3,2,1</p>
    <p @click="sort2">Sort to 1,2,3</p>
  </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {ref} from "vue";

export default {
  name: "SetLayerIndex.component",
  components: {Maptalks},
  setup() {

    let rect1 = ref(null), rect2 = ref(null), rect3 = ref(null)

    // sort to 3,2,1
    const sort1 = () => {
      rect3.value.bringToFront();
      rect1.value.bringToBack();
    }

    //sort to 1,2,3
    const sort2 = () => {
      rect1.value.setZIndex(3);
      rect2.value.setZIndex(2);
      rect3.value.setZIndex(1);
    }

    let mapOnLoadCB = (map) => {
      map.setZoom(14)

      rect3.value = new maptalks.Rectangle(map.getCenter().sub(0.025, 0.0035), 3000, 1000, {
        "symbol": [
          {
            "lineColor": "#34495e",
            "lineWidth": 3,
            "polygonFill": "#1bbc9b",
            "polygonOpacity": 1
          },
          {
            "textName": "3",
            "textWeight": "bold",
            "textSize": 30,
            "textFill": "#fff"
          }
        ]
      });

      rect2.value = rect3.value.copy().translate([0.006, 0.006]).updateSymbol([{"polygonFill": "rgb(216,115,149)"}, {"textName": "2"}]);

      rect1.value = rect2.value.copy().translate([0.006, 0.006]).updateSymbol([{"polygonFill": "rgb(135,196,240)"}, {"textName": "1"}]);

      new maptalks.VectorLayer(MapLayerConst.MAP_POLYGON_LAYER).addGeometry(rect3.value, rect2.value, rect1.value).addTo(map);
    };

    return {
      mapOnLoadCB,
      sort1, sort2
    }
  }
}
</script>

<style scoped lang="less">
.pane {
  background: #34495e;
  line-height: 28px;
  color: #fff;
  z-index: 10;
  position: absolute;
  top: 20px;
  right: 20px;

  p {
    cursor: pointer;
    display: block;
    color: #fff;
    text-align: left;
    padding: 0 10px;
    min-width: 28px;
    min-height: 28px;
    float: left
  }
}
</style>
